<!DOCTYPE html>
<meta charset="utf-8">
<title>ScrollTimeline current time algorithm</title>
<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="./resources/scrolltimeline-utils.js"></script>

<body></body>

<script>
'use strict';

promise_test(async t => {
  const scroller = setupScrollTimelineTest();
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    scrollOffsets: [CSS.px(10), CSS.px(20), CSS.px(40), CSS.px(70), CSS.px(90)],
  });

  var offset = 0;
  var w = 1 / 4; // offset weight
  var p = 0;     // progress within the offset

  scroller.scrollTop = 10;
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  p = (12 - 10) / (20 - 10);
  scroller.scrollTop = 12;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  offset = 1;
  p = 0;
  scroller.scrollTop = 20;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  p = (35 - 20) / (40 - 20);
  scroller.scrollTop = 35;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  offset = 2;
  p = 0;
  scroller.scrollTop = 40;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  p = (60 - 40) / (70 - 40);
  scroller.scrollTop = 60;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  offset = 3;
  p = 0;
  scroller.scrollTop = 70;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  p = (80 - 70) / (90 - 70);
  scroller.scrollTop = 80;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, (offset + p) * w * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  scroller.scrollTop = 90;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);
}, 'currentTime calculations when multiple scroll offsets are specified');

promise_test(async t => {
  const scroller = setupScrollTimelineTest();
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  var scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    scrollOffsets: [CSS.px(300), CSS.px(200), CSS.px(10)],
  });

  scroller.scrollTop = 250;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, 0,
    "current time calculation when scroll = " + scroller.scrollTop);

  scroller.scrollTop = 400;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    scrollOffsets: [CSS.px(0), CSS.px(400), CSS.px(200)],
  });

  scroller.scrollTop = 100;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, 0.25 * 0.5 * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);

  scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    scrollOffsets: [CSS.px(200), CSS.px(0), CSS.px(400)],
  });

  scroller.scrollTop = 200;
  await waitForNextFrame();
  assert_times_equal(
    scrollTimeline.currentTime, 0.5 * scrollerSize + 0.5 * 0.5 * scrollerSize,
    "current time calculation when scroll = " + scroller.scrollTop);
}, 'currentTime calculations when overlapping scroll offsets are specified');
</script>
